<template>
  <view class="container">
    <u-card :head-style="cardClass">
      <view class="" slot="body">
        <view
          class="u-body-item u-flex u-border-bottom just-content-around"
          @tap.stop="toLogPage()"
        >
          <view class="left">
            <view class="demo-layout bg-purple mr-10">
              <u-avatar src="../../static/user.png"></u-avatar>
            </view>
          </view>
          <view class="mid">
            <view v-if="isLogin"> {{ member.username }} </view>
            <view v-else>您还没有登录，请登录/注册。</view>
          </view>
          <view class="right">
            <view class="demo-layout bg-purple-light">
              <u-icon
                name="man-delete"
                size="38"
                @tap="handlerTapQuit()"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
    </u-card>

    <u-card :title="cardTitle[0]" class="pay_propertype">
      <view class="" slot="body">
        <u-grid :col="4" :border="false">
          <u-grid-item
            v-for="payPropertype in payPropertypes"
            :key="payPropertype.markID"
            @click="handlerPeyPropertype(payPropertype.url)"
            class="pay_item"
          >
            <u-icon
              :name="payPropertype.iconName"
              :size="46"
              :custom-style="iconClass[0]"
              class="mb-10"
            ></u-icon>
            <text
              class="reminder_number"
              v-show="payPropertype.title == '我的消息' && reminderNumber != 0"
              >{{ reminderNumber }}</text
            >
            <view class="grid-text">{{ payPropertype.title }}</view>
          </u-grid-item>
        </u-grid>
      </view>
    </u-card>
    <u-card v-show="false" :title="cardTitle[1]" class="after_sale_propertype">
      <view class="" slot="body">
        <!-- <view class="u-body-item u-flex"></view> -->
        <u-grid :col="4" :border="false">
          <!-- <u-grid-item>
            <u-icon
              name="rmb-circle-fill"
              :size="46"
              :custom-style="iconClass[0]"
            ></u-icon>
            <view class="grid-text">订单退款</view>
          </u-grid-item> -->

          <!-- <u-grid-item>
            <u-icon
              name="thumb-up-fill"
              :size="46"
              :custom-style="iconClass[0]"
            ></u-icon>
            <view class="grid-text">订单评价</view>
          </u-grid-item> -->
        </u-grid>
      </view>
    </u-card>

    <!-- <view class="bottom">
			<button type="primary" @tap="toLogPage">登录</button>
		</view> -->
    <u-toast ref="tips" />
    <u-modal
      v-model="show"
      :content="content"
      mask-close-able
      show-cancel-button
      @confirm="handlerConfirmQuit()"
    ></u-modal>
  </view>
</template>

<script>
import { mapGetters, mapState, mapMutations } from "vuex";
import loginVue from "../login/login.vue";
export default {
  data() {
    return {
      cardTitle: ["购买", "售后"],
      payPropertypes: [
        {
          iconName: "map-fill",
          title: "我的地址",
          markID: 0,
          url: "pages/address/address",
        },
        {
          iconName: "car-fill",
          title: "全部订单",
          markID: 1,
          url: "/pages/orders/orders",
        },
        {
          iconName: "bell-fill",
          title: "我的消息",
          markID: 2,
          url: "pages/reminder/reminder",
        },
        // {
        //   iconName: "bell-fill",
        //   title: "我的资料",
        //   markID: 3,
        // },
      ],
      cardClass: {
        display: "none",
      },
      iconClass: [
        {
          color: "rgba(0,0,255,0.6)",
        },
      ],
      show: false,
      content: "123",
      reminderNumber: 0,
      intervalReminder: null, // 定时器
    };
  },

  async onLoad() {
    console.log("member page onload.");
    await this.init();
  },
  async onReady() {
    await this.selectRemiderNumber();
  },
  // onShow() {

  // },
  mounted() {},
  async onShow() {
    await this.init();
    let that = this;
    let _number = 0;
    that.refashReminderNumber();
    that.intervalReminder = setInterval(async function () {
      if (that.isLogin)
        await that.$u.api.getAllReminder().then((res) => {
          console.log(res);
          if (res.list) {
            let _list = res.list.filter((r) => {
              return r.readed == 0;
            });
            that.reminderNumber = _list.length;
          } else {
            that.reminderNumber = 0;
          }
        });
    }, 5000);
    await this.getUserInfo();
  },
  onHide() {
    clearInterval(this.intervalReminder);
    this.intervalReminder = null;
    console.log("this interval-reminder stop.");
  },

  async onPullDownRefresh() {
    //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
    console.log("refresh");
    // 获取用户id
    await this.getUserInfo();
    uni.stopPullDownRefresh(); //停止下拉刷新动画
  },

  computed: {
    ...mapGetters(["isLogin"]), // 登录判断
    ...mapState(["member"]), // 用户数据
  },
  methods: {
    ...mapMutations(["SET_MEMBER", "REMOVE_MEMBER"]),
    ...mapGetters([""]),
    init() {
      this.getUserInfo();
    },
    // 登录
    toLogPage() {
      if (!this.isLogin) {
        uni.navigateTo({
          url: "../login/login",
        });
      } else {
        console.log("isLogin: true.");
      }
      return false;
    },
    getUserInfo() {
      let that = this;
      let token = "";
      uni.getStorage({
        key: "token",
        success(res) {
          console.log(res);
          that.$u.api.getUserInfo().then((res) => {
            if (res.user) {
              that.SET_MEMBER(res.user);
              uni.setStorage({
                key: "id",
                data: res.user.userId,
                fail() {
                  console.log("fail::userid set in storage fail.");
                },
              });
            } else {
              that.$refs.tips.show({
                title: "认证过期,请重新登录",
                type: "default",
              });
              uni.removeStorage({
                key: "token",
                fail() {
                  console.log("fail::userid remove fail.");
                },
              });
            }
          });
        },
        fail() {
          console.log("fail::token set in storage fail.");
        },
      });
    },
    // 注销
    handlerTapQuit() {
      this.content = "确认注销用户?";
      this.show = true;
      return false;
    },
    handlerConfirmQuit() {
      uni.removeStorage({
        key: "token",
      });
      uni.removeStorage({
        key: "id",
      });
      this.REMOVE_MEMBER();
      this.$refs.tips.show({
        title: "用户已注销",
        type: "success",
      });
    },
    handlerPeyPropertype(page) {
      uni.navigateTo({
        url: page.replace("pages/", "../"),
      });
      uni.switchTab({
        url: page,
      });
    },

    // 轮询检查消息
    async selectRemiderNumber() {},
    stopIntervalReminder() {
      intervalReminder = clearInterval(intervalReminder);
    },

    refashReminderNumber() {
      let that = this;
      setTimeout(async function () {
        if (that.isLogin)
          await that.$u.api.getAllReminder().then((res) => {
            console.log(res);
            if (res.list) {
              let _list = res.list.filter((r) => {
                return r.readed == 0;
              });
              that.reminderNumber = _list.length;
            } else {
              that.reminderNumber = 0;
            }
          });
      }, 0);
    },
  },
};
</script>

<style lang="scss" scoped>
u-card {
  .u-icon {
    margin-bottom: 10rpx;
  }
}
.container {
  height: 80vh;
  .mid {
    width: 70%;
  }
}
.pay_item {
  position: relative;
  .reminder_number {
    // display: inline-block;
    position: absolute;
    background: red;
    padding: 0 10rpx;
    border-radius: 50%;
    width: 40rpx;
    height: 40rpx;
    box-sizing: border-box;
    // text-align: center;
    line-height: 40rpx;
    color: #fff;
    top: 10rpx;
    right: 30rpx;
    display: flex;
    justify-content: center;
  }
}
</style>
